<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="tableBar">
        <label style="margin-right: 10px">员工姓名:</label>
        <el-input v-model="employeeName" placeholder="请输入员工姓名" style="width: 15%"/>
        <el-button type="primary"  style="margin-left: 25px"
                   @click="handleSearch">查询</el-button>
        <el-button type="primary" style="float: right"
                   @click="handleAddEmployee">+添加员工</el-button>
      </div>
      <el-table :data="records" style="width: 100%;">
        <el-table-column
          prop="name"
          label="员工姓名"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="username"
          label="帐号"
          width="150"
          align="center">
        </el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          prop="status"
          label="帐号状态"
          width="180"
          align="center">
          <template v-slot="scope">
            {{ scope.row.status === 0 ? '禁用' : '启用' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="updateTime"
          label="最后操作时间"
          width="180"
          align="center">
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="200"
          align="center">
          <template v-slot="scope">
            <el-button type="text" @click="handleUpdateEmp(scope.row)">修改</el-button>
            <el-button type="text" @click="handleStartOrStop(scope.row)">
              {{scope.row.status == 1 ? '禁用' : '启用'}}
            </el-button>
            <el-button type="text" @click="handleDeleteEmp(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pageList"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40, 50]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script lang="ts">
import {getEmployeeList, enableOrDisableEmployee, deleteEmployee} from "@/api/employee";

export default {
  data() {
    return {
      employeeName: '',
      page: 1,
      pageSize: 10,
      total: 0,
      records: [],
    }
  },
  created() {
    const _this = this;
    _this.handleSearch();
  },
  methods: {
    // 分页查询
    handleSearch() {
      const _this = this;
      // 参数
      const params = {
        name: _this.employeeName,
        page: _this.page,
        pageSize: _this.pageSize
      };
      // 发送 Ajax 请求，获取员工数据
      getEmployeeList(params).then(res => {
        if (res.data.code === 1) {
          _this.total = res.data.data.total;
          _this.records = res.data.data.records || [];  // 确保 records 是一个数组
        }
      }).catch(err => {
        _this.$message.error('请求出错了：' + err.message);
      });
    },

    // pagination
    // pageSize发生变化
    handleSizeChange(pageSize) {
      const _this = this;
      _this.pageSize = pageSize;
      this.handleSearch();
    },
    // page发生变化
    handleCurrentChange(page) {
      const _this = this;
      _this.page = page;
      this.handleSearch();
    },

    // 启用禁用员工帐号
    handleStartOrStop(row) {
      const _this = this;

      if (row.username === 'admin') {
        this.$message.error('admin为管理员帐号，不能更改帐号状态！');
        return;
      }

      // 确认提示框
      this.$confirm('确认修改该员工的状态?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'customClass'
      }).then(() => {
        const params = {
          id: row.id,
          status: !row.status ? 1 : 0
        };

        enableOrDisableEmployee(params).then(res => {
          if (res.data.code === 1) {
            _this.$message.success('员工帐号状态更改成功！');
            _this.handleSearch();
          } else {
            _this.$message.error('员工帐号状态更改失败！');
          }
        });
      });
    },

    // 跳转新增员工页面
    handleAddEmployee() {
      // 路由跳转，新增员工组件
      this.$router.push({
        path: '/employee/add'
      });
    },

    // 跳转修改员工页面
    handleUpdateEmp(row) {
      const _this = this;
      if (row.username === 'admin') {
        this.$message.error('admin为管理员帐号，不能修改！');
        return;
      }
      _this.$router.push({
        path: '/employee/update',
        query: {
          id: row.id
        }
      });
    },

    // 删除员工
    handleDeleteEmp(row) {
      const _this = this;
      if (row.username === 'admin') {
        this.$message.error('admin为管理员帐号，不能删除！');
        return;
      }
      this.$confirm('确认删除该员工,是否继续', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(res=>{
        const params = {
          id: row.id
        };
        deleteEmployee(params).then(res => {
          if (res.data.code === 1) {
            _this.$message.success('删除成功！');
            _this.handleSearch();
          } else {
            _this.$message.error(res.data.msg);
          }
        }).catch(err => {
          _this.$message.error('请求出错了：' + err.message);
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.disabled-text {
  color: #bac0cd !important;
}
</style>
